<template>
  <div>
    <!--这是登录页面-->
    <div class="bg-box" >
      <div class="filterImg">
        <img src="../../assets/images/login/5.jpg">
      </div>
      <!--    登录边框      -->
      <div class="loginBox">
        <h1>爱之情科技</h1>
        <div class="InputBox">
          <input placeholder="请输入用户名"  v-model="userName"></input><br/>
          <input placeholder="密码" v-model="password"></input><br/>
          <button @click="goHome()">登录</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Login",
  data(){
    return{
      index:5,
      imgArr:['../../assets/images/login/1.jpg','../../assets/images/login/2.jpg',
        '../../assets/images/login/3.jpg','../../assets/images/login/4.jpg',
        '../../assets/images/login/5.jpg','../../assets/images/login/6.jpg'
      ],
      userName:"",
      password:'',

    }
  },
  //函数
  methods:{
//登录函数
    goHome(){
      if(this.userName==='admin' && this.password==='123'){
        //登录成功 存储到本地
        localStorage.setItem('token','Bearer ####')
        //跳主也
        this.$router.push('/Home')
      } else {
        //登录失败
        localStorage.removeItem('token')
      }
    },





    //先不用
    changImg(){
      setInterval(()=>{
        this.index++
        if(this.index===this.imgArr.length){
          this.index=0
        }
      },2000)
    }

  },
  //生命周期
  created() {

  }

}
</script>

<style lang="less" scoped>




.bg-box{
  width: 100%;
  height:930px;
  position: relative;
  //背景虚画
  .filterImg img{
    width: 100%;
    height:930px;
    -webkit-filter: blur(5px);
    -moz-filter:blur(5px);
    -o-filter:blur(5px);
    -ms-filter: blur(5px);
    filter:blur(5px);
  }
  //登录透名边框
  .loginBox{

    position: absolute;
    width: 650px;
    height: 550px;
    top: 170px;
    left: 550px;
    text-align: center;
    h1{

      color: #992439;
      font-size: 45px;
    };
    .InputBox{
      margin-top: 20px;

      padding: 20px;
      height: 400px;
      input{
        margin-top: 45px;
        border-radius:6px;
        height: 82px;
        width: 556px;
        background-color: transparent;
        font-size: 22px;
        border: 1px solid rgba(0,0,0,0.2);
        outline: none;

      }
      button{
        background-color: #d97b0f;
        margin-top: 45px;
        border-radius:6px;
        height: 82px;
        width: 556px;
        font-size: 22px;
        border: 1px solid rgba(0,0,0,0.2);
      }
    }

  }
}
</style>